<!-- 将element-plus的el-input组件再次封装 -->
<template>
  <!-- 姓名输入框 -->
  <div class="myinput">
    <el-input
      class="login_input margin_top"
      :placeholder="placeholder"
      v-model="inputval"
      @input="inputEvent"
      :show-password="isPassword"
    ></el-input>
    <p class="notice" v-show="showNotice">
      {{ notice }}
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
interface Idata {
  inputval: string|number;
}
export default defineComponent({
  emits: ["myinput"],
  props: {
    showNotice: {
      type: Boolean,
    },
    notice:{
      type:String
    },
    placeholder:{
      type:String
    },
    isPassword:{
      type:Boolean
    }
  },
  data(): Idata {
    return {
      inputval:""
    };
  },
  methods: {
    inputEvent(value: string | number) {
      //console.log(value);

      this.$emit("myinput", value);
    },
  },
});
</script>

<style scoped lang="scss">
.myinput {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .login_input {
    width: 100%;
  }

  .margin_top {
    margin-top: 1em;
  }

  .notice {
    margin: 0 0 0 5px;
    font-size: 0.75em;
    color: red;
  }
}
</style>
